<template>
    <div class="slide" ref="slide">
        <div class="slide-group" ref="slideGroup">
            <div class="slide-item" v-for="(item,index) in imagesArray" :key="index">
                <a :href="item.href" v-if="click">
                    <img :src="item.src" alt="">
                </a>
                <img :src="item.src" alt="" v-else>
            </div>
        </div>
        <div class="dots">
            <span v-for="(item,index) in dots" :key="index" :class="{active:currentPageIndex === index}"></span>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll';
    export default {
        data() {
            return {
                children: null, //slide-group 下的childern
                dots: [], //进度条
                currentPageIndex: 0, //当前进度
                timer:null ,   //定时器
            }
        },
        props: {
            // 自动轮播
            autoPlay: {
                type: Boolean,
                default: true,
            },
            // 循环播放
            loop: {
                type: Boolean,
                default: true,
            },
            // 自动轮播间隔时间
            time: {
                type: Number,
                default: 4000,
            },
            /* 
                图片数组
                格式：[
                    {
                        href:链接,
                        src:图片地址,
                    }
                ]
            */
            imagesArray: {
                type: Array,
                default: [],
            },
            click: {
                type: Boolean,
                default: true,
            }
        },
        mounted() {
            // 使用定时器确保图片已经加载，20ms为浏览器刷新频率
            setTimeout(() => {
                this.setslideGroupWidth();
                this.initBScroll();
                if (this.autoPlay) {
                    clearTimeout(this.timer);
                    this.autoPlay();
                }
            }, 20);
            window.addEventListener('resize',()=>{
                this.setslideGroupWidth(true);
                this.BScroll.refresh();
            })
        },
        methods: {
            // 设置容器宽度
            setslideGroupWidth(isResize) {
                this.children = this.$refs.slideGounp.children;

                let slideWidth = this.$refs.slide.clientWidth;
                let width = 0;
                for (let i = 0; i < this.children.length; i++) {
                    width += slideWidth;
                    this.children[i].style.width = slideWidth + 'px';
                }
                if (this.loop && !isResize) {
                    width += 2 * slideWidth;
                }
                this.$refs.slideGounp.style.width = width + 'px';
            },
            //初始化BScroll
            initBScroll() {
                this.BScroll = new BScroll(this.$refs.slide,{
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: {
                        loop: this.loop,
                        threshold: 0.3,
                        speed: 400,
                    },
                    bounce: false,
                    click: this.click,
                })

                this.BScroll.on('scrollEnd', () => {
                    let pageIndex = this.BScroll.getCurrentPage().pageX;
                    if (this.loop) {
                        pageIndex - +1;
                    }
                    this.currentPageIndex = pageIndex;
                    if (this.autoPlay) {
                        this.autoPlay();
                    }
                })
            },
            // 初始化Dots
            initDOts() {
                this.dots = new Array(this.children.length);
            },
            // 自动播放
            autoPlay() {
                let pageIndex = this.currentPageIndex + 1;
                if (this.loop) {
                    pageIndex += 1;
                }
                this.timer = setTimeout(() => {
                    this.BScroll.goToPage(pageIndex, 0, 400);
                }, this.time);
            }
        },
        destroyed () {
            clearTimeout(this.timer);
        }
    }
</script>

<style lang="less" scoped>
    .slide {
        min-height: 1px;
        .slide-group {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }
        .slide-item {
            float: left;
            box-sizing: border-box;
            overflow: hidden;
            text-align: center;
        }
        a {
            display: block;
            width: 100%;
            overflow: hidden;
            text-decoration: none;
        }
        img {
            display: block;
            width: 100%;
        }
        .dots {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 12px;
            transform: translateZ(1px);
            text-align: center;
            font-size: 0;
            .dot {
                display: inline-block;
                margin: 0 4px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fff;
                &.active {
                    width: 20px;
                    border-radius: 5px;
                    background: #666;
                }
            }
        }
    }
</style>